<template>
  <div class="age">
    <a href="javascript:;" title="" class="up" v-on:click="prevPage">上一页</a>
    <span>{{pageNum||0}}</span>/<span>{{totalPageNum}}</span>
    <a href="javascript:;" title="" class="down" v-on:click="nextPage">下一页</a>
    <input type="text" name="" v-model="pageNum">    页
    <a href="javascript:;" title="" id="pageTotal">共{{totalNum}}条信息</a>
  </div>
</template>

<script>
  export default{
    name: 'my-page',
    props: ['pageNum', 'totalPageNum', 'totalNum', 'pageData', 'allList', 'limit'],
    computed: {
      prevPageNum: function () {  // 计算前一页的页码
        if (this.pageNum > 1) {
          return this.pageNum - 1
        }
        return this.pageNum
      },
      nextPageNum: function () {  // 计算后一页的页码
        if (this.pageNum < this.totalPageNum) {
          return this.pageNum + 1
        }
        return this.pageNum
      }
    },
    watch: {
      allList: function (val) {  // 监听总数据变化，用于初次加载和查询
        this.pageData(this.showList(this.pageNum), this.pageNum)
      },
      pageNum: function (val) {
        if (val) {
          this.pageData(this.showList(val), val)
        }
      }
    },
    methods: {
      prevPage: function () {  // 上一页
        if (this.pageNum !== this.prevPageNum) {
          this.pageData(this.showList(this.prevPageNum), this.prevPageNum)
        }
      },
      nextPage: function () {  // 下一页
        if (this.pageNum !== this.nextPageNum) {
          this.pageData(this.showList(this.nextPageNum), this.nextPageNum)
        }
      },
      showList: function (pageNum) {  // 返回应该显示的数据
        var list = []
        for (var i = this.startRow(pageNum); i < this.endRow(pageNum); i++) {
          if (this.allList[i]) {
            list.push(this.allList[i])
          }
        }
        return list
      },
      startRow: function (pageNum) {  // 计算开始行数
        return (pageNum - 1) * this.limit
      },
      endRow: function (pageNum) {  // 计算结束行数
        return pageNum * this.limit
      }
    }
  }
</script>
